<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<!--[if lt IE 9]>
  <script src="libs/html5shiv.min.js"></script>
  <script src="libs/respond.min.js"></script>
  <![endif]-->
<script src="libs/jquery-1.12.1.min.js"></script>
<link href="libs/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="libs/bootstrap-3.3.6/js/bootstrap.min.js"></script>
<script src="libs/handlebars.min.js"></script>
<script src="libs/d3.v3.min.js"></script>
<script src="libs/nv.d3.min.js"></script>
<link href="libs/nv.d3.min.css" rel="stylesheet">
 <script src="libs/jquery.backstretch.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<ul class="nav nav-pills">
					<li class="active">
						<!--<a href="login.html">退出当前用户</a>  -->
						<button id="logout" class="btn btn-primary btn-block">退出当前用户</button>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="page-header">
				<h1 align="center">
					<strong>Archive</strong>
					</h2>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<ul class="nav nav-pills">
					<li class="active"><a href="index.html">首页</a></li>
					<li><a href="add.html">档案添加</a></li>
					<li><a href="querymohu.html">查询</a></li>
					<li><a href="#"><span id="nickname">用户</span></a></li>
					
				</ul>

			</div>
		</div>
	</div>
	<div class="col-md-offset-8">
		<ul class="nav nav-pills">
			<li>
				<div className="input-group">
					<input className="for_control" id="search-box-value"
						placeholder="档案号或身份证号" type="text" /> <span
						className="input-group-btn">
						<button className="btn btn-default" id="search" type=button>
							<i className="fa fa-search">搜索</i>
						</button>
					</span>
				</div>
			</li>
		</ul>
	</div>


	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<p>最近预览的档案</p>
				<div id="list1"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<p>最近添加的档案</p>
				<div id="list2"></div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-6" id="chart">
				<p class="text-center">
					<br />
				<hr />
				<strong>使用统计</strong>
				<svg style="height: 480px; width: 100%"></svg>
				<br />
				</p>
			</div>
			<div class="col-md-6" id="chart1">
				<p class="text-center">
					<br />
				<hr />
				<svg style="height: 480px; width: 100%"></svg>
				<br />
				</p>
			</div>
		</div>
	</div>
<div class="col-md-4">
				起始时间: <input type="text" id="date1" /><br /> 
				截至时间: <input type="text" id="date2" /><br />
				<button id=shijian class=" col-md-offset-7">查询</button>
			</div>

	<script id="template" type="text/x-handlebars-template">
   {{#each item}}
 	 <div class="panel panel-default col-md-3" >
   	  <div class="panel-body">
    	   <dl>
    	     <dt>档案号</dt><dd>{{archive}}</dd>
     	  	 <dt>身份证号</dt><dd>{{identity}}</dd>
     	   	 <dt>姓名</dt><dd>{{name}}</dd>
     	  	 <dt>性别</dt><dd>{{gender}}</dd>
		  	 <dt>生日</dt><dd>{{birthday}}</dd>
      	 </dl>  
      </div>
    </div>
 {{/each}}
</script>
 <script type="text/javascript">
  $.backstretch("101.jpg");
  </script>
	<script type="text/javascript">
		$(function() {
			$('#search').click(function() {
				$.post('queryone.action', {

					search : $('#search-box-value').val(),
				}, function(res, status) {
					if ('REE' == res) {
						alert('没有查到数据')
					} else if ('REE2' == res) {
						alert('请输入正确信息')
					} else {
						console.log(res);
						window.location.href = "queryone.html?id=" + res;
					}
				});
			});
			$.getJSON('querynickname.action', function(res) {
				console.log(res);
				$('#nickname').text(res.s3);

			});
			$('#logout').click(function() {
				$.post('logout.action', {

				}, function(res, status) {
					window.location.href = "login.html";
				});
			});
			$.getJSON('querylist.action', function(res) {
				console.log(res);
				var data = {
					'item' : res
				};
				var t = Handlebars.compile($('#template').html());
				$('#list1').html(t(data));

			});
			$.getJSON('querylistadd.action', function(res) {
				console.log(res);
				var data = {
					'item' : res
				};
				var t = Handlebars.compile($('#template').html());
				$('#list2').html(t(data));

			});
		})
	</script>
	<script type="text/javascript">
		$(function() {
			today = new Date();
			var date;
			var centry;
			centry = "";
			if (today.getFullYear() < 2000)
				centry = "19";
			date1 = centry + (today.getFullYear()) + "-"
					+ (today.getMonth() + 1) + "-0" + "1";
			date2 = centry + (today.getFullYear()) + "-"
					+ (today.getMonth() + 1) + "-" + today.getDate();
			//document.write( date1+date2);
			$('#date1').val(date1);
			$('#date2').val(date2);
			$('#shijian').click(
					function() {
						$.post('querycount.action', {
							date1 : $('#date1').val(),
							date2 : $('#date2').val(),
						}, function(res, status) {
							nv.addGraph(function() {
								var chart = nv.models.pieChart().x(function(d) {
									return d.nickname
								}).y(function(d) {
									return d.counter
								}).showLabels(true).labelType('percent');
								d3.select("#chart svg").datum(res).transition()
										.duration(350).call(chart);
								return chart;
							})
						})
					})
		})
	</script>

</body>
</html>